<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>个人学业预警通知</span>
      </div>
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="5" animated />
      </div>
      <div v-else>
        <el-table :data="warnings" border style="width: 100%">
          <el-table-column prop="courseName" label="课程名称" align="center" />
          <el-table-column prop="credit" label="学分" align="center" />
          <el-table-column prop="score" label="成绩" align="center" />
          <el-table-column prop="warningType" label="预警类型" align="center" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { checkAcademicWarnings } from '@/api/student'

export default {
  name: 'AcademicWarning',
  data() {
    return {
      // 映射表（自动生成）
      majorMapping: {}, // 中文专业名 => 数据库ID
      classMapping: {}, // 专业ID => 班级列表
      studentMapping: {}, // 班级ID => 学生列表

      // 输入绑定字段
      majorIdLabel: '', // 展示用中文名
      majorIdValue: '', // 接口用英文ID
      classIdLabel: '', // 展示用班级名
      classIdValue: '', // 接口用英文ID
      studentId: '', // 学号

      // 自动补全选项
      majorOptions: [],
      classOptions: [],
      studentOptions: [],

      // 能力数据
      radarData: {
        student: null,
        class: null,
        major: null
      },

      loading: false
    }
  },
  created() {
    // 模拟原始数据输入（可以从接口获取）
    const rawMajorData = `
major1,college1,计科
major2,college1,AI
major3,college1,大数据
major4,college1,物联
major5,college1,通信
major6,college1,电子
major7,college1,计算机类
major8,college1,曙光
major9,college1,电信类
major10,college1,建筑类
    `.trim().split('\n')

    const rawClassData = `
class126,major1,计科2401班
class104,major1,计科2402班
class41,major1,计科2403班
class111,major1,计科2404班
class86,major2,AI2401班
class121,major2,AI2402班
    `.trim().split('\n')

    const rawStudentData = `

    `.trim().split('\n')

    // 自动生成映射表
    this.generateMappings(rawMajorData, rawClassData, rawStudentData)
  },
  mounted() {
    this.fetchWarnings()
  },
  methods: {
    async fetchWarnings() {
      this.loading = true
      try {
        const studentId = this.$store.state.user.token// 从 Vuex 中获取学号
        const response = await checkAcademicWarnings(studentId)
        if (response.success) {
          this.warnings = response.data
        } else {
          this.$message.error(response.message)
        }
      } catch (error) {
        this.$message.error('获取数据失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.loading-container {
  padding: 20px;
}
</style>
